<!-- 头部导航 -->
<template>
    <div class="my_header">
        <div class="left" @click="musicSet">
            <van-icon name="wap-nav" size="22" />

        </div>
        <van-popup v-model:show="showLeft" round position="left" :style="{ width: '70%', height: '100%' }">
            <div class="set">
                <div class="denglu">立即登录 ></div>
                <div class="buju">
                    <div class="mokuai">
                        <div class="text">我的消息 ></div>
                        <div class="text">徽章消息 ></div>
                    </div>
                    <div class="mokuai">
                        <p class="title">音乐服务</p>
                        <div class="text">商城 ></div>
                        <div class="text">设计大赛 ></div>
                        <div class="text">彩铃专区 ></div>
                    </div>
                    <div class="mokuai">
                        <p class="title">其他</p>
                        <div class="text">定时关闭 ></div>
                        <div class="text">个性装扮 ></div>
                    </div>

                </div>
            </div>
        </van-popup>

        <div class="content">
            <div :class="{ active: currentTag === 1 }" @click="handleClick(1)">我的</div>
            <div :class="{ active: currentTag === 2 }" @click="handleClick(2)">发现</div>
            <div :class="{ active: currentTag === 3 }" @click="handleClick(3)">云村</div>
            <div :class="{ active: currentTag === 4 }" @click="handleClick(4)">视频</div>
        </div>
        <div class="right">
            <van-icon name="search" size="22" />
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router/index.js';

let currentTag = ref(2)
const handleClick = (tag) => {
    console.log(tag);
    currentTag.value = tag
    router.push({ name: tag === 1 ? 'mine' : tag === 2 ? 'discover' : tag === 3 ? 'yuncun' : 'video' })
}

let showLeft = ref(false)
// 
const musicSet = () => {
    console.log('点击了设置');
    showLeft.value = true
}

</script>
<style scoped>
.my_header {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0;
}

.my_header .content {
    display: flex;
    width: 180px;
    justify-content: space-around;
}

.set {
    padding: 10px;
}

.denglu {
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: antiquewhite;
    border-radius: 15px;
}

.mokuai {
    background-color: azure;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 10px 0 10px 10px;
}



.title {
    font-size: 13px;
    color: #4d4949e0;
    border-bottom: 1px solid #ccc;
}

.text {
    font-size: 17px;
    padding-top: 16px;
}
</style>